<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取网页元素</title>
</head>
<body>
<div id="time">
  2022-09-23
</div>

<div id="list">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>

  <ol>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
  </ol>

</div>

<div class="app">
  <p class="p1">你好世界</p>
  <p class="p1">你好世界1</p>
</div>
<script>
  //使用文档对象调用方法获取元素对象，一切的方法都是使用的文档对象来调用
  let a = document.getElementById('time');
  //方法的返回值是一个对象,且返回的是一个完整的带有标签的元素
  console.log(a)
  console.log(typeof a)
  //使用方法查看对象的完整信息
  console.dir(a)

  //可以通过标签名选中所有的标签元素
  //获取元素对象的时候的返回结果是一个伪数组
  let c = document.getElementsByTagName('li')
  console.log(c)
  //当需要返回父级标签下的子元素标签时，可以将父元素转换为对象进行调用方法
  let b = document.getElementsByTagName('ol')
  //当想要获取列表中的子标签时，可以使用伪数组中的下标定位
  let d = b[0].getElementsByTagName('li')
  console.log(d);
  //最简单的方法还是给父级标签一个ID属性，并通过页面文档对象直接获取id修饰的属性名获取页面元素对象

  //获取元素中的对象的简便方法
  //通过类名选择元素对象
  let e = document.getElementsByClassName('p1')
  console.log(e)
  //返回指定选择器的第一个元素，不考虑是类选择器，id选择器还是标签选择器
  let f = document.querySelector('.app');
  console.log(f)
  //只会返回第一个元素,使用类名的时候需要加“.”号，id是“#”号
  let g= document.querySelector('.p1')
  console.log(g)
  //如果需要返回所有的元素，需要使用其他方法
  let h = document.querySelectorAll('.p1')
  console.log(h)
  //返回的还是一个伪数组，可以使用下标的方式选择其中的元素

  
</script>
</body>
</html>